<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layui-table</title>
<link rel="stylesheet" href="layui/css/layui.css" >
</head>
<body >
	<table id="demo" lay-filter="demo"></table>
</body>
<script src="layui/layui.js"></script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
//JavaScript代码区域
layui.use(['table','layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
  
   table.render({
	    elem: '#demo'
	    ,height: 312
	    ,url: 'TunnelServiet' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	       {type: 'checkbox', fixed: 'left',}
	      ,{field: 'luduan', title: '路段编号', width:110, sort: true, fixed: 'left'}
	      ,{field: 'suidao', title: '路段名称', width:110, sort: true}
	      ,{field: 'zhuangtao', title: '桩道中心桩号', width:200}
	      ,{field: 'changdu', title: '长度', width:110, sort: true} 
	      ,{field: 'xiujianniandu', title: '修建年度', width:110, sort: true} 
	      ,{field: 'gaijianniandu', title: '改建年度', width:110, sort: true} 
	      ,{field: 'gaijianname', title: '建设单位名称', width:110, sort: true} 
	      ,{field: 'shejiname', title: '设计单位名称', width:110, sort: true} 
	      ,{field: 'shigongname', title: '施工单位名称', width:110, sort: true} 
	      ,{field: 'jianliname', title: '监理单位名称', width:110, sort: true} 
	      ,{field: 'tongcheshijian', title: '建成通车时间', width:110, sort: true} 
	      ,{field: 'guanyangname', title: '管养单位名称', width:110, sort: true} 
	      ,{field: 'jishudengji', title: '技术状况评定等级', width:110, sort: true} 
	      ,{field: 'pingdingriqi', title: '评定日期', width:110, sort: true} 
	      ,{field: 'pingdingdanwei', title: '评定单位', width:110, sort: true} 
	      ,{field: 'zhengqudaima', title: '政区代码', width:110, sort: true}       
	      ,{fixed: 'beizhu', title:'备注', toolbar: '#barDemo', width:150}
	    ]]
	});
   
   // 绑定行工e具栏事件
   table.on('tool(demo)',function(obj){
	   var data = obj.data;
	   if(obj.event==='edit'){
		   alert("编辑"+data.id);
		   
		   layer.open({
			   type: 2,
			   title: 'layer mobile页',
			   shadeClose: true,
			   shade: 0.8,
			   area: ['380px', '90%'],
			   content: 'index.jsp' //iframe的url
		   }); 
		   
	   }
	   if(obj.event==='del'){
		   alert("删除"+data.username);
	   }
   });
  
});
</script>
</html>